<template>
  <div class="margin1-top">
    <div class="title-row">
      <div class="title-left">主管单位</div>
      <div v-for="(item, index) in zgdw">
        <a :class="{ blue: changeZgdw == index }" @click="change1(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title-row">
      <div class="title-left">建设性质</div>
      <div v-for="(item, index) in jsxz">
        <a :class="{ blue: changeJsxz == index }" @click="change2(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title-row">
      <div class="title-left">合同类型</div>
      <div v-for="(item, index) in htlx">
        <a :class="{ blue: changeHtlx == index }" @click="change3(index)">{{
          item.name
        }}</a>
      </div>
    </div>
    <div class="title-row">
      <div class="title-left">年份</div>
      <div v-for="(item, index) in nf">
        <a :class="{ blue: changeNf == index }" @click="change4(index)">{{
          item.name
        }}</a>
      </div>
    </div>

    <div class="title">
      <span>合同资料管理</span>
    </div>
    <div class="subtitle">
      <span>排序选择</span>
      <span>时间 <i class="el-icon-bottom"></i></span>
    </div>

    <div style="padding-bottom: 20px; float: right">
      <!-- <el-button type="primary" plain style="float: right;" @click = "upload">上传资料</el-button> -->
      <import-excel></import-excel>
    </div>

    <div style="padding-top: 30px">
      <el-table :data="tableData" border>
        <el-table-column
          prop="xmmc"
          label="项目名称"
          width="300"
          @row-click="clickCol"
        > 
          <template slot-scope="scope">
            <a
              href="#/biddetail"
              target="_blank"
              v-if="scope.row.xmmc == '襄阳市疾病预防控制中心迁建项目'"
              style="color: blue"
              >{{ scope.row.xmmc }}</a
            >
            <a v-else>{{ scope.row.xmmc }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="xmdm" label="项目代码"> </el-table-column>
        <el-table-column label="中标通知书"  width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="f1" label="中标通知时间"> </el-table-column>
        <el-table-column label="施工合同"  width="100">
            <template slot-scope="scope">
            <el-button type="text" size="small">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="f1" label="施工合同签定时间"> </el-table-column>
        <el-table-column prop="f1" label="施工合同备案时间"> </el-table-column>
        <el-table-column label="安全监督备案" width="100">
            <template slot-scope="scope"  >
            <el-button type="text" size="small">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>

        <el-table-column label="质量监督备案"  width="100">
           <template slot-scope="scope">
            <el-button type="text" size="small">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>

        <el-table-column label="分包"  width="120">
            <template slot-scope="scope">
            <el-button type="text" size="small">分包1</el-button>
            <el-button type="text" size="small">分包2</el-button>
          </template>
        </el-table-column>

        <el-table-column label="竣工验收报告"  width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small">分包1</el-button>
            <el-button type="text" size="small">分包2</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="f1" label="竣工时间"> </el-table-column>

        <el-table-column label="安全质量监督报告"  width="100">
           <template slot-scope="scope">
            <el-button type="text" size="small">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>

        <el-table-column label="环保验收报告"  width="100">
          <template slot-scope="scope">
            <el-button type="text" size="sma ll">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>

        <el-table-column label="竣工结算审核报告"  width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">下载</el-button>
            <el-button type="text" size="small">阅读</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div style="float: right; margin-top: 15px">
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import importExcel from "@/components/import/index.vue";

export default {
  components: {
    importExcel,
  },

  data() {
    return {
      changeZgdw: 0,
      changeJsxz: 0,
      changeHtlx: 0,
      changeNf: 0,
      zgdw: [
        {
          no: 1,
          name: "不限",
          active: true,
        },
        {
          no: 2,
          name: "市财政局",
          active: false,
        },
        {
          no: 3,
          name: "市科技局",
          active: false,
        },
        {
          no: 4,
          name: "市人社局",
          active: false,
        },
        {
          no: 5,
          name: "市招商局",
          active: false,
        },
        {
          no: 6,
          name: "市自然规划局",
          active: false,
        },
      ],

      jsxz: [
        {
          no: 1,
          name: "不限",
        },
        {
          no: 2,
          name: "新建项目",
        },
        {
          no: 3,
          name: "续建项目",
        },
        {
          no: 4,
          name: "扩建项目",
        },
        {
          no: 5,
          name: "恢复项目",
        },
      ],
      htlx: [
        {
          no: 1,
          name: "不限",
        },
        {
          no: 2,
          name: "施工合同",
        },
        {
          no: 3,
          name: "分包合同",
        },
        {
          no: 4,
          name: "付款合同",
        },
        {
          no: 5,
          name: "其他",
        },
      ],

      nf: [
        {
          no: 1,
          name: "不限",
        },
        {
          no: 2,
          name: "2018年",
        },
        {
          no: 3,
          name: "2019年",
        },
        {
          no: 4,
          name: "2020年",
        },
        {
          no: 5,
          name: "2021年",
        },
      ],
      xmmc: "襄阳市疾病预防控制中心迁建项目",

      tableData: [
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "施工合同",
        },
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "分包合同",
        },
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "付款合同",
        },
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "付款合同",
          f1: "",
        },
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "施工合同",
        },
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "分包合同",
        },
        {
          date: "2016-05-02",
          xmmc: "襄阳市疾病预防控制中心迁建项目",
          xmdm: "XYS_8888888",
          zllx: "付款合同",
        },
      ],
    };
  },
  methods: {
    download1() {
      alert("正在下载！");
    },
    download2() {
      alert("正在下载！");
    },

    clickCol(row, event, column) {
      console.log(row, event, column);
    },
    change1(index) {
      this.changeZgdw = index;
    },
    change2(index) {
      this.changeJsxz = index;
    },
    change3(index) {
      this.changeHtlx = index;
    },
    change4(index) {
      this.changeNf = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.margin1-top {
  margin-top: 65px;
}

.title-row {
  background-color: #f3f3f3;
  display: flex;
  align-items: center;
}

.title-row div {
  padding: 10px;
}

.title-left {
  background-color: #dbdbdb;
  width: 200px;
  text-align: center;
}

.text {
  font-size: 14px;
}

.title {
  font-size: 25px;
  color: #000000;
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 5px solid #000;
}
.subtitle {
  padding: 10px 0;
}
.subtitle span:first-child {
  background-color: pink;
  padding: 5px;
}

.subtitle span:last-child {
  background-color: palevioletred;
  padding: 5px;
  color: white;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 360px;
  margin: 10px;
}

#app {
  width: 100%;
  padding: 10px;
}

.blue {
  color: blue;
}
</style>
